<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link
						to="/portal/index">首页</router-link></a> > <a><router-link
						to="/portal/net">网谷里</router-link></a>>
				<a><router-link to="/portal/net/site">代表联络站</router-link></a> >
				<a>{{ street.streetName }}代表联络站</a>
				<a href="" class="back"><img src="../../../assets/img/back.png" alt=""><router-link
						to="/portal/net/site">返回上一级</router-link></a>
			</div>
		</div>
		<div class="inner">
			<div class="net w1200">
				<h3>{{ street.streetName }}代表联络站</h3>
				<div class="p20">
					<div class="street-contact">
						<div class="left">
							<div class="tit">{{ street.streetName }}代表联络站</div>
							<div class="num-group">
								<div class="group">
									<div class="num">{{ street.representativesCount }}</div>
									<div class="txt">联络站</div>
								</div>
								<div class="group">
									<div class="num">{{ street.stationCount }}</div>
									<div class="txt">驻站代表</div>
								</div>
							</div>
							<div class="list">
								<div class="item" :class="{ 'active': item.checked }" v-for="item in station"
									@click="goStationItem(item.id)">
									<div class="pic">
										<img src="../../../assets/img/contact-icon.png" alt="">
									</div>
									<div class="txt">
										<div class="top">
											{{ item.name }}
										</div>
										<div class="bottom">
											<img src="../../../assets/img/contact-icon5.png" alt="">
											{{ item.address }}
										</div>
									</div>
									<div class="arrow">
										>
									</div>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="top">
								<img src="../../../assets/img/contact-icon2.png" alt="">
								<h5>{{ stationDetail.name }}</h5>
							</div>
							<div class="contact-detail">
								<div class="item"><img src="../../../assets/img/contact-icon3.png"
										alt=""><span>联系人：</span>{{ stationDetail.representatives }}</div>
								<div class="item"><img src="../../../assets/img/contact-icon4.png"
										alt=""><span>开放时间：</span>{{ stationDetail.openingHours }}</div>
								<div class="item"><img src="../../../assets/img/contact-icon5.png"
										alt=""><span>联系地址：</span>{{ stationDetail.address }}</div>
							</div>
							<!-- <div class="title">
								<div></div>近期活动
							</div>
							<div class="sub-list">
								<a class="item">
									2024年4月12日代表进站接待选民<span>></span>
								</a>
								<a class="item">
									2024年4月12日代表进站接待选民<span>></span>
								</a>
								<a class="item">
									2024年4月12日代表进站接待选民<span>></span>
								</a>
							</div> -->
						</div>
					</div>
				</div>

			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { getStaionInfo, getStreetInfo, getStaionDetail } from "@/api/website";
import { listStreetInfo } from "@/api/StreetInfo/StreetInfo";
import { Number } from 'core-js';
export default {
	data() {
		return {
			List: [],
			station: [],
			street: {},
			stationId: Number,
			stationDetail: {},
		}
	},
	components: {
		Header,
		Contact
	},
	created() {
		this.init()
	},
	mounted() {

	},
	methods: {
		init() {
			getStreetInfo(this.$route.query.id).then(response => {
				this.street = response.data;
			});
			getStaionInfo({ id: this.$route.query.id }).then(response => {
				this.station = response;
				this.station[0].checked = true;
				this.stationId = this.station[0].id;
				this.getStaionDetails(this.stationId)
			});

		},
		goStationItem(id) {
			for (const key in this.station) {
				if (this.station[key].id == id) {
					this.station[key].checked = true;
				} else {
					this.station[key].checked = false;
				}
			}
			this.stationId = id;
			this.getStaionDetails(this.stationId)
		},
		getStaionDetails(id) {
			getStaionDetail(id).then(response => {
				this.stationDetail = response.data;
			});
		}
	}

};
</script>

<style scoped lang="scss"></style>
